﻿.gradient(@from-color, @to-color, @from-position, @to-position) {
    background: @from-color; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, @from-color @from-position, @to-color @to-position); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-position,@from-color), color-stop(@to-position,@to-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @from-color @from-position,@to-color @to-position); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @from-color @from-position,@to-color @to-position); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @from-color @from-position,@to-color @to-position); /* IE10+ */
    background: linear-gradient(to bottom, @from-color @from-position,@to-color @to-position); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@from-color', endColorstr='@to-color',GradientType=0 ); /* IE6-8 */
}

body, html, header, article, section, div, a, p, h1, img, form, label, input, button, nav, ul, li, footer, aside, h2 {
    margin: 0;
    padding: 0;
}

body {
    .gradient(#D593FF, #9215F2,0%,100%);

    header {
        div#header-container {

            div {
                display: inline-block;
            }


                div#logo-container {
                    margin-left: 15px;
                    margin-top: 25px;
                }

                div#reg-form-container {
                    float: right;
                    margin-top: 30px;
                    text-align: right;

                    form {
                        margin-right: 85px;

                        div {

                            label {
                                color: white;
                            }


                            input {
                                background: #b35ef3;
                                border-radius: 10px;
                                border: 1px solid #603382;
                                padding: 2px;
                                margin-left: 5px;

                                &:first-of-type {
                                    margin-bottom: 10px;
                                }
                            }
                        }


                        #btn-register {
                            display: block;
                            padding: 3px 7px 3px 7px;
                            border-radius: 10px;
                            width: 80px;
                            border-color: #3c2051;
                            background: #b35ef3;
                            margin-top: 5px;
                            color: white;
                            font-weight: bold;
                        }
                    }
                }
        }

        nav {

            ul#main-nav-list {
                border: 2px solid black;
                width: 1010px;
                margin-left: 35px;
                margin-top: 30px;
                padding-top: 12px;
                padding-bottom: 12px;
                border-radius: 20px;
                font-size: 1.2em;


                li {
                    position: relative;

                    a:hover {
                        text-decoration: underline;
                        color: #808080;
                    }

                    &:hover {
                        & > ul {
                            padding: 5px 0 0 0;
                            left: -15px;
                            width: 240px;
                            display: block;
                            position: absolute;
                            .gradient(#b86af3,#b86af3, 0%, 100%);
                            opacity: 0.9;
                            z-index: 90;
                            border-radius: 5px;

                            li {
                                padding-bottom: 10px;
                                vertical-align: central;
                                display: block;
                                width: 200px;
                                border-bottom: 1px solid black;
                                margin-bottom: 10px;

                                &:last-of-type {
                                    border-bottom: none;
                                }

                                a {
                                    z-index: 999;
                                    padding: 10px 10px;
                                    font-size: 0.9em;
                                }
                            }
                        }
                    }

                    margin-left: 20px;

                    a {
                        color: white;
                        text-decoration: none;
                    }

                    display: inline-block;

                    & > ul {
                        display: none;
                    }
                }
            }
        }
    }

    section {
        width:980px;
        margin-top: 35px;
        padding: 10px 20px;

        article {
            border: 1px solid black;
            color: white;
        }
    }
}
